import React, { useRef, useEffect } from "react";
import {
    Scene, WebGLRenderer, BoxGeometry, MeshNormalMaterial, Mesh,
    Matrix4, Vector3, PerspectiveCamera, Object3DEventMap, Light, DirectionalLight, MeshPhongMaterial, MeshBasicMaterial,
    CircleGeometry, PlaneGeometry, RingGeometry, ShapeGeometry, Shape,
} from 'three';
import "./css/ResponsiveDesign.css"
import { vs, fs } from './shader/struct'

// if (navigator.gpu) {
//     console.log('支持');
// } else {
//     console.log('不支持');
// }

//浏览器请求GPU适配器
const adapter = await navigator.gpu.requestAdapter();
//获取GPU设备对象, 通过GPU设备镀锡device的WebGPU API可以控制GPU的渲染过程
const device = await adapter?.requestDevice() as GPUDevice;


const canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const context = canvas.getContext('webgpu')!;
const format = navigator.gpu.getPreferredCanvasFormat();//颜色数据
context?.configure({
    device: device,//GPU对象
    format: format,//颜色数据
});

// 创建命令编码器
const commandEncoder = device.createCommandEncoder();
// 创建渲染通道对象
const renderPass = commandEncoder.beginRenderPass({
    colorAttachments: [
        {
            //指向用于Canvas画布纹理视图对象(Canvas对应的缓冲区)
            //该渲染管道renderPass输出的像素会存储到Canvas对应的颜色缓冲区
            view: context.getCurrentTexture().createView(),
            storeOp: 'store',//像素数据写入颜色缓冲区
            loadOp: 'clear',//每次渲染前执行清除?
            clearValue: { r: 0.5, g: 0.5, b: 0.5, a: 1.0 },//背景颜色
        }
    ]
});


//加载顶点着色器
const vsM = device.createShaderModule({ code: vs });
const fsM = device.createShaderModule({ code: fs });

// 创建渲染管线
const pipeline = device.createRenderPipeline({
    vertex: {//顶点作色器
        module: vsM,
        entryPoint: 'main',
        buffers: [
            {
                arrayStride: 6 * 4,//posi + color = 6
                attributes: [{
                    shaderLocation: 0,
                    format: 'float32x3',
                    offset: 0
                }, {
                    shaderLocation: 1,
                    format: 'float32x3',
                    offset: 3 * 4 //偏移量3
                }],
            }
        ]
    },
    fragment: {
        module: fsM,
        entryPoint: 'main',
        targets: [{
            format: format
        }],
    },
    primitive: {
        topology: "triangle-list",
    },
    layout: 'auto',
});



//设置当前需要控制的渲染管线
renderPass.setPipeline(pipeline);


const vertices = new Float32Array([
    0.0, 0.0, 0.0, 1, 0, 0,
    0.5, 0.0, 0.0, 0, 1, 0,
    0.25, 0.5, 0.0, 0, 0, 1,
]);
const verticesBuffer = device.createBuffer({
    size: vertices.byteLength,
    usage: GPUBufferUsage.VERTEX | GPUBufferUsage.COPY_DST
});
device.queue.writeBuffer(verticesBuffer, 0, vertices);
//这里还是填0
renderPass.setVertexBuffer(0, verticesBuffer);



renderPass.draw(3);
renderPass.end();

//创建命令缓冲区
const commandBuffer = commandEncoder.finish();
//生成GPU指令存入缓冲区
device.queue.submit([commandBuffer]);



let loadIndex = 0;
const RenderStructure = () => {
    const divRef = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const { current } = divRef;
        if (current != null) {
            current.innerHTML = '';
            current.append(canvas);
        }
    }, []);
    return (
        <div ref={divRef}></div>
    );
};

export default RenderStructure;
